<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>巡检任务管理</title>
    <script th:src="@{/layui1/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/layui1/css/layui.css}">
</head>
<body>
<!-- 右操作栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-radius layui-btn-danger" lay-event="del">删除</a>
</script>

<!-- 头操作栏 -->
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn " lay-event="add">添加</button>
</script>


<!--=========================================================添加任务=============================================================-->
<form class="layui-form layui-form-pane" id="save_task_form" style="display:none;margin: 10px">
    <div class="layui-form-item">
        <label class="layui-form-label">任务名称</label>
        <div class="layui-input-block">
            <input name="problem" id="problem" lay-verify="required" lay-reqText="任务名称不能为空"
                    autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">任务描述</label>
        <div class="layui-input-block">
            <input name="problemDescription" id="problemDescription" lay-verify="required" lay-reqText="任务描述不能为空"
                     autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input id="createTime" name="createTime"  autocomplete="no" class="layui-input date">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input id="endTime" name="endTime"  autocomplete="off" class="layui-input date">
            </div>
        </div>
    </div>

    <div class="layui-form-item" align="center">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="saveTask">
                <i class="layui-icon layui-icon-release"></i> 立即提交
            </button>
        </div>
        <div class="layui-inline">
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius"><i class="layui-icon layui-icon-refresh"></i>重置
            </button>
        </div>
    </div>
</form>


<!--=========================================================更新任务信息=============================================================-->
<!--<form class="layui-form layui-form-pane" id="update_task_form" style="display:none;margin: 10px">
    <input type="hidden" name="id">

    <div class="layui-form-item">
        <label class="layui-form-label">任务名称</label>
        <div class="layui-input-block">
            <input name="problem" lay-verify="required" lay-reqText="任务名称不能为空"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">任务描述</label>
        <div class="layui-input-block">
            <input name="problemDescription" lay-verify="required" lay-reqText="任务描述不能为空"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input name="createTime"  autocomplete="no" class="layui-input date">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input name="endTime"  autocomplete="off" class="layui-input date">
            </div>
        </div>
    </div>

    <div class="layui-form-item" align="center">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-primary layui-btn-radius" lay-submit lay-filter="updateTask">
                <i class="layui-icon layui-icon-release"></i> 立即提交
            </button>
        </div>
        <div class="layui-inline">
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-radius"><i class="layui-icon layui-icon-refresh"></i>重置
            </button>
        </div>
    </div>
</form>-->

<!-- 数据表格 -->
<table id="taskTable" lay-filter="test"></table>

</body>
<script>

    layui.use(['table', 'form', 'layer','laydate','jquery'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //    var upload = layui.upload;

        //初始化身份证下拉框
        $(function () {

        });

        //执行table
        var mytable = table.render({
            elem: '#taskTable'
            , height: 655
            , url: '/task/findTask' //数据接口
            , id: 'tableReload'//利用id重载数据表格
            , title: '巡检任务表'
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , page: true //开启分页
            , skin: 'row'
            , even: true
            , size: 'lg'
            , limit: 10
            , limits: [10, 20, 30, 40, 50, 60]
            , cols: [
                [ //表头
                      {field: 'id', title: '编号', width: '5%', align: 'center'}
                    , {field: 'problem', title: '任务名称', width: '10%', align: 'center'}
                    , {field: 'problemDescription', title: '描述', width: '20%', align: 'center'}
                    , {field: 'createTime', title: '开始时间', width: '10%', align: 'center'}
                    , {field: 'endTime', title: '结束时间', width: '10%', align: 'center'}
                    , {field: 'person', title: '巡检人', width: '10%', align: 'center'}
                    , {field: 'address', title: '加油站名称', width: '10%', align: 'center'}
                    , {field: 'status', title: '巡检状态', width: '10%', align: 'center'}
                    , {fixed: 'right', title: '查看', width: '15%', align: 'center', toolbar: '#barDemo'}
                ]]
        });


        //监听头工具栏事件
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        title: '发布内容',
                        type: 1,
                        content: $('#save_task_form'),
                        area: ['690px', '400px']
                    });
                    break;
            }
        });
        //常规用法
        laydate.render({
            elem: '#createTime'
        });

        //常规用法
        laydate.render({
            elem: '#endTime'
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 的lay-filter="对应值"属性
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                if (data.status==="巡查中"||data.status==="已结束") {
                    layer.msg("巡查中或已结束的任务不能删除");
                    return
                }
                layer.confirm('真的删除行么', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: '/task/deleteTask/'+data.id,
                        dataType: 'json',
                        type: 'DELETE',
                        //data: {"id": data.id},//将js对象转成json串传入到后台
                        success: function (result) {
                            layer.closeAll();//关闭对话框
                            layer.msg(result.msg);
                            mytable.reload();//重新加载表格数据
                        },
                        error:function (result) {
                            layer.msg(result.msg);
                        }
                    })
                });
            }
        });

        //监听保存表单的提交
        form.on('submit(saveTask)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            console.log(data);
            $.ajax({
                url: '/task/addTask',
                dataType: 'json',
                type: 'POST',
                contentType:'application/json;charset=utf-8',//传入参数格式  必须写
                data: JSON.stringify(data.field),
                success: function (result) {
                    layer.closeAll();//关闭对话框
                    layer.msg(result.msg);
                    mytable.reload();//重新加载表格数据
                    $("#save_task_form")[0].reset();
                },
                error:function (result) {
                    layer.msg(result.msg);
                }
            });
            return false;
        });



    });


</script>
</html>